<template>
  <div ref="commentId">
    <h3>评论</h3>
    <!-- 发布评论 -->
    <span class="userInfo" v-if="userData.userName">
      回复 @{{userData.userName}}
      <i class="el-icon-close" @click="$emit('removeUserData')"></i>
    </span>
    <div class="submit">
      <el-input ref="textarea" type="textarea" :rows="2" placeholder="说的什么吧..." v-model="textarea"></el-input>
      <el-row class="row">
        <el-col :span="21">
          <el-upload
            :action="$axios.defaults.baseURL+'/upload'"
            name="files"
            :file-list="cover"
            :on-success="uploadSuccess"
            :on-remove="removeImage"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-col>
        <el-col class="btn" :span="3">
          <el-button type="primary" size="small" @click="submitComment">提交</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    userData: Object
  },
  data() {
    return {
      textarea: "",
      cover: []
    };
  },
  methods: {
    locationId() {
      // 定位到当前指定位置
      this.$refs.commentId.scrollIntoView();
      // 聚焦
      this.$refs.textarea.focus();
    },
    // 上传图片成功回调函数
    uploadSuccess(response, file, fileList) {
      const res = response[0];
      // 修改url路径
      res.url = this.$axios.defaults.baseURL + res.url;
      res.uid = file.uid;
      res.status = file.status;
      res.name = file.name;
      this.cover.push(res);
    },
    // 清除图片成功回调函数
    removeImage(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.cover = fileList;
    },
    // 提交评论
    submitComment() {
      const token = this.$store.state.user.userInfo.token;
      if (!token) return this.$router.push("/user/login");
      if (this.textarea.trim() || this.cover.length) {
        const data = {
          content: this.textarea,
          pics: this.cover,
          post: +this.$route.query.id
        };
        // 判断是否回复用户
        if (this.userData.userId) data.follow = this.userData.userId;
        this.$axios({
          url: "comments",
          method: "post",
          data,
          headers: {
            Authorization: "Bearer " + token
          }
        }).then(res => {
          if (res.data.message == "提交成功") {
            this.$message.success(res.data.message);
            this.textarea = "";
            this.cover = [];
            this.$emit("getCommentData");
            // 发布后清除用户信息
            if (this.userData.userId) this.$emit("removeUserData");
          }
        });
      } else {
        this.$message("请输入内容");
      }
    }
  }
};
</script>

<style lang="less" scoped>
h3 {
  font-weight: normal;
  padding: 20px 0;
}
.userInfo {
  display: inline-block;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  color: #909399;
  border-radius: 4px;
  margin-bottom: 10px;
  background: #f4f4f5;
  .el-icon-close {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    &:hover {
      background: #909399;
      color: #fff;
    }
  }
}
.submit {
  /deep/ .el-textarea {
    padding-bottom: 10px;
    .el-textarea__inner {
      resize: none;
    }
  }
  /deep/ .el-row {
    padding-bottom: 20px;
    .el-upload--picture-card {
      width: 98px;
      height: 98px;
      line-height: 98px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 98px;
      height: 98px;
      .el-upload-list__item-thumbnail {
        object-fit: cover;
      }
    }
    .btn {
      text-align: right;
      .el-button {
        padding: 7px 15px;
      }
    }
  }
}
</style>